<template>
    <div class="status-chart-wrap">
        <h-section title="需求相关统计">
            <template #titleExtra>
                <flexbox class="margin-l-8">
                    <span class="caption-font-color">需求大类：</span>
                    <a-select placeholder="请选择" v-model:value="query.requireType">
                        <a-select-option :key="item.value" v-for="item of options.requireType">
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
                </flexbox>
            </template>
            <a-row>
                <template v-for="item of chartArr" :key="item.title">
                    <a-col :span="8">
                        <div class="title">{{ item.title }}</div>
                        <h-pie-chart :option="item.option" />
                    </a-col>
                </template>
            </a-row>
        </h-section>
    </div>
</template>
<script lang="ts">
import api from '@/api';
import HSection from '@/components/HSection/HSection.vue';
import { HPieChart } from '@/components';
import { defineComponent, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    name: 'RequireStatusChart',
    components: { HSection, HPieChart },
    props: {
        detail: { type: Object, default: () => ({}) }
    },
    setup(props) {
        const state = reactive<any>({
            chartArr: [
                { title: '需求阶段占比', typeField: 'name', api: api.statisticsModel.statisticsRequireStage, option: null },
                { title: '状态占比', typeField: 'status', api: api.statisticsModel.statisticsRequireStatus, option: null },
                { title: '需求类型占比', typeField: 'requireType', api: api.statisticsModel.statisticsRequireType, option: null }
            ],
            query: {
                requireType: 'business',
                system: ''
            }
        });
        const options = {
            requireType: [
                { name: '业务需求', value: 'business' },
                { name: '产品需求', value: 'product' }
            ]
        };
        const getData = async ({ api, typeField }) => {
            state.query.system = props.detail.id;
            const { success, moule } = await api(state.query);
            if (success) {
                const typeArr: any[] = [];
                const dataArr: any[] = [];
                let numTotal = 0;
                moule.forEach((item) => {
                    typeArr.push(item[typeField]);
                    dataArr.push({
                        value: item.total,
                        name: item[typeField]
                    });
                    numTotal += item.total;
                });
                const obj = {
                    name: '需求阶段',
                    status: '需求状态',
                    requireType: '需求类型'
                };
                console.log(obj[typeField], typeArr, dataArr);
                return {
                    title: state.query.requireType === 'business' ? '业务需求总数' : '产品需求总数',
                    seriesName: obj[typeField],
                    typeArr,
                    dataArr,
                    numTotal
                };
            }
        };
        const getAllData = () => {
            Promise.all(state.chartArr.map((item) => getData(item))).then((res) => {
                res.forEach((item: any, index) => {
                    state.chartArr[index].option = {
                        ...item
                    };
                });
            });
        };
        watch(state.query, getAllData, { deep: true });
        getAllData();
        return {
            ...toRefs(state),
            options
        };
    }
});
</script>
<style lang="less" scoped>
.status-chart-wrap {
    .title {
        font-size: 14px;
        color: #172b4d;
    }
}
</style>

